<template>
  <div style="padding: 10px">
    <Row>
      <Col span="8">
      <div class="col">
        <!-- <label>所属项目</label> -->
        <Select v-model="whereMap.projectId"
                style="width:300px"
                placeholder="所属项目">
          <Option v-for="item in proList"
                  :value="item.id"
                  :key="item.id">{{ item.shortName }}</Option>
        </Select>
      </div>

      </Col>
      <Col span="8">
      <div class="col">
        <!-- <label>名称</label> -->
        <Input v-model="whereMap.name"
               placeholder="临建设施名称"
               style="width: 300px" />
      </div>
      </Col>
      <Col span="8">
      <div class="col">
        <Select v-model="whereMap.distOverlayFacilities"
                style="width:300px"
                placeholder="类型">
          <Option v-for="item in typeList"
                  :value="item.code"
                  :key="item.code">{{ item.name }}</Option>
        </Select>
      </div>
      </Col>
    </Row>
    <Row style="margin: 10px 0">

      <Col span="10"
           offset="14"
           style="text-align: right">
      <label style='color: white;display: block'>按钮</label>
      <Button type="primary"
              style="margin-right: 5px"
              @click="getList"
              v-if="control.search">搜索</Button>
      <Button type="primary"
              style="margin-right: 5px"
              @click="clickButton('add', '')"
              v-if="control.add">新增</Button>
      <Button type="primary"
              style="margin-right: 5px"
              @click="importData"
              v-if="control.export">导入</Button>
      <Button type="primary"
              style="margin-right: 5px"
              @click="deleteBtn"
              v-if="control.delete">删除</Button>
      <Button type="warning"
              style="margin-right: 5px"
              @click='reset'
              v-show="false">重置</Button>
      </Col>
    </Row>
    <Table border
           :columns="columns"
           :data="data"
           style="margin: 20px 0"
           @on-select="selectRiado"
           @on-select-all="selectRiadoAll"
           @on-select-cancel="selectCancel"
           @on-select-all-cancel="selectAllCancel">
      <template slot-scope="{ row }"
                slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row }"
                slot="action">
        <span class='button-class'
              @click="clickButton('edit', row.id)"
              v-show="control.edit">编辑</span>
        <span class='button-class'
              @click="clickButton('details', row.id)"
              v-show="control.detail">详情</span>
      </template>
    </Table>
    <Page :total="page.total"
          size="small"
          :current="this.page.currentPage"
          :page-size="this.page.pageSize"
          show-elevator
          show-sizer
          show-total
          style="text-align: center"
          @on-change="currentChange"
          @on-page-size-change="pageChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '序号',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h('span', params.index + 1)
          }
        },
        {
          title: '名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '类型',
          key: 'distOverlayFacilitiesName',
          align: 'center',
          width: 200
        },
        {
          title: '所属项目',
          key: 'projectName',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 140,
          align: 'center'
        }
      ],
      data: [],
      whereMap: {
        name: '',
        projectId: '',
        distOverlayFacilities: '' //临建设施类型
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      typeList: [],
      proList: [],
      deleteList: [],
      control: {}
    }
  },
  methods: {
    getList() {
      //请求列表
      let reqData = {
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
        orderColumn: 'update_time',
        orderSort: 'desc',
        whereMap: this.whereMap
      }
      this.$api.TemporaryFacility.findList(reqData)
        .then(res => {
          if (res.code === 200) {
            this.data = res.data.resultObject
            this.page.total = res.data.totalRecord
          }
        })
        .catch(() => {
          this.$Message.warning('获取列表失败')
        })
    },
    currentChange(current) {
      //翻页
      this.page.currentPage = current
      this.getList()
    },
    pageChange(pagesize) {
      //改变页数
      this.page.pageSize = pagesize
      this.getList()
    },
    getTypeList() {
      //获取类型列表
      this.$api.user
        .dictTypeCode('OVERLAY_FACILITIES')
        .then(res => {
          if (res.code === 200) {
            this.typeList = res.data
          } else {
            this.$Message.warning(res.message)
          }
        })
        .catch(() => {
          this.$Message.warning('获取类型失败')
        })
    },
    getProList() {
      //获取项目列表
      let data = { cascade: true, isQueryJurProject: true }
      this.$api.TemporaryFacility.findProList(data)
        .then(res => {
          if (res.code === 200) {
            this.proList = res.data
          } else {
            this.$Message.warning(res.message)
          }
        })
        .catch(() => {
          this.$Message.warning('获取项目失败')
        })
    },
    clickButton(type, id) {
      if (type == 'edit' || type == 'add') {
        let pageData = {
          whereMap: this.whereMap,
          page: this.page
        }
        localStorage.setItem('pageList', JSON.stringify(pageData))
      }
      const addId = parseInt(Math.random() * 100000)
      let route = {
        params: {
          type,
          id: type == 'add' ? addId : id,
          name:
            type == 'add'
              ? '临建设施新增'
              : type == 'edit'
              ? '临建设施编辑'
              : '临建设施详情'
        },
        name: 'temporary-facility-add'
      }
      this.$router.push(route)
    },
    reset() {
      this.whereMap = {
        name: '',
        projectId: '',
        distOverlayFacilities: ''
      }
      ;(this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0
      }),
        this.getList()
    },
    importData() {
      let pageData = {
        whereMap: this.whereMap,
        page: this.page
      }
      localStorage.setItem('pageList', JSON.stringify(pageData))
      let route = {
        params: {
          name: '临建设施导入'
        },
        name: 'temporary-facility-import'
      }
      this.$router.push(route)
    },
    //删除
    deleteBtn() {
      if (this.deleteList.length <= 0) {
        this.$Message.warning('请选择要删除的数据')
        return false
      }
      const deleteList = []
      this.deleteList.forEach(val => {
        let obj = {}
        obj.id = val.id
        obj.typeId = val.typeId
        obj.code = val.code
        obj.name = val.name
        obj.description = val.description
        deleteList.push(obj)
      })
      this.$Modal.confirm({
        title: '删除提醒',
        closable: true,
        content: '确认要删除此项内容？',
        width: 360,
        onOk: () => {
          this.$api.TemporaryFacility.getProfessionalTypeDelete(
            this.deleteList
          ).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.message)
              this.getList()
            } else {
              this.$Message.error(res.data.msg)
            }
          })
        }
      })
    },
    //全选
    selectRiadoAll(e) {
      this.deleteList = e
    },
    //全选取消
    selectAllCancel() {
      this.deleteList = []
    },
    //单选
    selectRiado(e) {
      this.deleteList = e
    },
    //取消某一项
    selectCancel(e) {
      this.deleteList.splice(e, 1)
    },
    //按钮权限
    buttonShow() {
      let buttonList = JSON.parse(localStorage.getItem('buttonList'))
      buttonList.map(val => {
        let key = Object.keys(val).toString()
        if (key === this.$route.name) {
          Object.values(val)[0].map(item => {
            if (item.code == 'P_020402_01') {
              this.control.add = true
            } else if (item.code == 'P_020402_02') {
              this.control.edit = true
            } else if (item.code == 'P_020402_03') {
              this.control.delete = true
            } else if (item.code == 'P_020402_04') {
              this.control.detail = true
            } else if (item.code == 'P_020402_05') {
              this.control.export = true
            } else if (item.code == 'P_020402_06') {
              this.control.search = true
            }
          })
        }
      })
    },
    getUserDefaultProject() {
      //默认所属项目
      this.$api.TemporaryFacility.getUserDefaultProject()
        .then(res => {
          if (res.code == 200) {
            this.whereMap.projectId = res.data.id
            this.getList()
          } else {
            this.getList()
          }
        })
        .catch(error => {
          this.getList()
        })
    }
  },

  mounted() {
    //this.getList()
    this.getTypeList()
    this.getProList()
    this.buttonShow()
    this.getUserDefaultProject()
  }
}
</script>

<style lang="scss" scoped >
.col {
  padding: 5px;
  .col-item {
    display: inline-block;
    margin-right: 10px;
    label {
      display: block;
    }
  }
  label {
    display: block;
  }
}

.asterisk:before {
  content: '*';
}

.text-center {
  text-align: center;
}
</style>
